/*
 * Copyright (C) 2015 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

// use on a UL or a OL to reset
@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
  li {
    margin: 0;
    padding: 0;
  }
}

@mixin vertical-gradient($topColor, $bottomColor) {
  background-image: linear-gradient(to bottom, $topColor, $bottomColor);
}

// Firefox has a bug with white-space that breaks our ellipses CSS. This mixin
// replaces the ellipses with a gradient fade-out. The mixin should be applied to
// the parent of the ellipses or ellipsis class. There is an optional parameter
// for hover states where the background color of the parent changes

@mixin firefox-white-space-bug-fix-gradient($fade-out-color) {
  background: linear-gradient(to right, rgba(255,255,255,0) 0%,$fade-out-color 75%);
}

@mixin firefox-white-space-bug-fix($gradient-color: $ic-color-light, $gradient-color-hover: null) {
  body.ff & {
    .ellipses, .ellipsis {
      white-space: normal;
      height: $baseLineHeight;
      position: relative;
      &:after {
        @include firefox-white-space-bug-fix-gradient($gradient-color);
        content: "";
        position: absolute;
        right: 0; top: 0;
        height: $baseLineHeight; width: $ic-sp*2.5;
        z-index: 1;
      }
    }
    @if ($gradient-color-hover) {
      &:hover {
        .ellipses, .ellipsis {
          &:after { @include firefox-white-space-bug-fix-gradient($gradient-color-hover); }
        }
      }
    }
  }
}

// Quick and easy way for times where you want the icon to be
// (usually) larger than the default 16px
// Add this mixin under a parent class, and any icons that are
// children of your class will show at the size specified in the
// $new-icon-size parameter
@mixin overwrite-default-icon-size($new-icon-size) {
  i[class*=icon-], i[class^=icon-] {
    line-height: 1;
    &:before {
      font-size: $new-icon-size;
    }
  }
}

// make <input readonly> look like plain text
@mixin readonly-input {
  input[readonly] {
     background-color: transparent;
     border-color: transparent;
     box-shadow: none;
     font-weight: bold;
     cursor: default;
     &:focus {
       border-color: transparent;
       outline-style: none;
     }
   }
}
